<template>
  <div class="msg">
    <!-- 头部 -->
      <div class="msg_head">
          <el-button  type="primary"  plain @click="show(1)">查看消息</el-button>
          <el-button  type="success" plain  @click="show(2)">发送消息</el-button>
      </div>
      <!-- 内容 -->
      <div  class="msg_nav">
         <div class="msg_One" v-show="shows==1">
         <!-- 查找功能 -->
             <div class="msg_One_hed">
                  <el-form ref="form" inline="false" label-width="80px" size="mini">
                          <el-form-item label="姓名查询">
                             <el-input placeholder="请输入" v-model="int"></el-input>
                          </el-form-item>
                          <el-form-item label="状态查询">
                           <el-select  v-model="value" clearable placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"  :value="item.value"></el-option>
                          </el-select>
                         </el-form-item>
                         <el-form-item >
                           <el-button  type="primary"  plain @click="cxmsg">查询</el-button>
                         </el-form-item>
                  </el-form>       
             </div>
             <!-- 展示区 -->
              <div class="msg_One_nva" >
                  <el-table :data="copye" height="250" border style="width: 100%,position: relative;">
                     <el-table-column prop="InformSender" label="发送者"  min-width></el-table-column>
                     <el-table-column prop="InformTime"  label="发送时间" min-width></el-table-column>
                     <el-table-column prop="InformStatus" label="状态" min-width> </el-table-column> 
                     <el-table-column label="操作" min-width>
                        <template slot-scope="scope">
                           <el-button @click="deles(scope.row)" type="text" size="small">删除</el-button>
                           <el-button  @click="keyss(scope.row)"  type="text" size="small">查看</el-button>
                        </template>
                        
                    </el-table-column> 
                </el-table>
              </div>
              <!--查看消息 -->
              <div class="mcs" v-show="zt">
                     <img src="../assets/sc.png" @click="scs">
                      <h2 :style="{textAlign:'left',width: '80%',margin:'10px auto 0' }">消息:</h2>
                    <div class="mc_nr" :style="{margin:'40px auto 0',width: '70%',textAlign:'left'}">{{copyes.InformContent}}</div>
              </div>
         </div>
          <div class="msg_Two" v-show="shows==2">
                 <div class="msg_Two_left">
                      <p>新建消息</p>
                      <div class="msg_Two_left_left">
                      <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
                          <el-form-item label="接收者">
                            <el-input placeholder="请输入"   v-model="inputst"></el-input>
                          </el-form-item>
                      
                          <el-form-item label="消息内容">
                            <el-input type="textarea"  :rows="2"  placeholder="请输入内容" v-model="textareast"></el-input>
                           </el-form-item>
                        <el-form-item size="large">
                            <el-button type="primary" @click="onSubmitst">立即创建</el-button>
                         </el-form-item>
                    </el-form>
                    </div>
              </div>
              <div class="msg_Two_right">
                     <div class="msg_Two_right_One">
                            <div class="block" >
                            <div class="radio">
                                <el-radio-group v-model="reverse">
                                 <el-radio :label="true">倒序</el-radio>
                                <el-radio :label="false">正序</el-radio>
                               </el-radio-group>
                            </div>
                            <div class="msg_Two_right_OneA" >
                              <el-timeline :reverse="reverse">
                                      <el-timeline-item :style="{fontSize:'12px'}"
                                        v-for="(activity, index) in sender"
                                         :key="index"
                                         :timestamp="activity.InformTime">
                                         <h3>发送成功</h3>{{activity.InformSender}}——{{activity.InformCopyer}}  {{activity.InformContent}}
                                      </el-timeline-item>
                            </el-timeline>
                           </div>
                          </div>
                      </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import Qs from 'qs'
export default {
  
      data() {
        return {
          //筛选的数据
             options: [{value: '已读',label: '已读' },
                      {value: '未读', label: '未读'}, ],
            int:'',//姓名查询双向绑定数据
            value:'',//状态查询双向绑定数据
            inputst:'',//接收者的双向绑定数据
            textareast:'',//消息内容的双向绑定数据
             shows:1,
             zt:false,
             reverse: true,
             copyes:{},//承装查看的数据
             login:{},//存放登录数据
             sender:[],//承装发件人的数据
             copye:[],//承装收件人的数据
        }
      },
      methods: {
        // 查看信息并修改状态
        keyss(val){
          let that=this
         this.zt=true
         this.copyes=val
         //修改数据
         if(this.copyes.InformStatus=='未读'){
         that.$axios({
            url:'http://localhost:9090/updateEmil',
            method:'post',
            data:{carobj:{InformStatus:'已读',InformId:val.InformId}}
         })
        //  console.log(111);
         this.msg()
         }
        },
        scs(){
          this.zt=false
        },
        //创建消息
        onSubmitst(){
           let tim=new Date().toLocaleString()
           console.log(this.login);
           this.$axios({
              url:'http://localhost:9090/insertEmil',
              method:'post',
              data:{carobj:{
                InformCopyer:this.inputst,
                InformSender:this.login.UserName,
                InformTime:tim,
                InformContent:this.textareast,
                InformStatus:'未读'
              }}
           }).then(res=>{
             this.inputst=''
             this.textareast=''
           })
            this.msg()
        },
        //删除信息
        deles(val){
          console.log(val.InformId);
           let id=val.InformId
           this.$axios({
              url:'http://localhost:9090/deleteEmil',
              method:'post',
              data:Qs.stringify({InformId:id})
           }).then(res=>{

           })
            this.msg()
        },
        // 获取数据
         msg(){
           let obj={InformSender:this.int,
                    InformStatus:this.value}
                    
          this.$axios({
             url:'http://localhost:9090/selectEmil',
             method:'post',
             data:Qs.stringify(obj)
          }).then(res=>{
             // 获取发件人是自己的数据
            this.sender=(res.data.data).filter(item=>{
                return this.login.UserName==item.InformSender
            })
             console.log(this.sender);
            //获取收件人是自己的数据
            this.copye=(res.data.data).filter(item=>{
                return this.login.UserName==item.InformCopyer
            })
          })
          
         },
        //  控制页面显示和隐藏
        show(num){
           this.shows=num
        },
        //查询调用的接口
        cxmsg(){
           this.msg()
        },
      },
      //生命周期挂在后
      mounted() {
       this.login=this.$store.state.logininfo
        this.msg()
      },
    }
  
</script>

<style>
   .msg{
    width: 100%;
    height: 530px;
    background: #fff;
   }
   /* 头部 */
   .msg_head{
    width: 98%;
    height: 15%;
    margin: 0 0 0 10px;
    line-height: 81px;
    text-align: left;
   }
   .msg_head_bnt{
    margin: 0 0 30px 0;
   }
   /* 内容 */
   .msg_nav{
    width: 100%;
    height: 85%;
   }
   /* 查看消息 */
   .msg_One{
    width: 100%;
    height: 100%;
   }
   .msg_One_hed{
    width: 50%;
    margin:20px 0;
   }
   .msg_One_nva{
    width: 98%;
    margin: auto;
   }
    .mcs{
    width: 40%;
    height: 300px;
    background: rgba(245, 245, 245, 0.9);
    border-radius: 10px;
    position: absolute;
    top: 100px;
    left:580px;
    
   }
   .mcs>img{
    width: 20px;
    position: absolute;
    top: 0px;
    left: 610px;
   }
   .mcs_nr{
     background-image:-webkit-linear-gradient(left,red,#fd8403,#c2eb3b,#00ff00,#84fb03,#0000ff); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
    /* border: 1px solid #f00; */
   }
    /* 新建消息 */
     .msg_Two{
        width: 100%;
        height: 100%;
        overflow: hidden;
     }
     /* 左边 */
     .msg_Two_left{
        width: 60%;
        height: 100%;
        float: left;
        /* background: #f00; */
     }
     .msg_Two_left>p{
        height:28px;
        line-height: 28px;
        margin: 20px 0 0 0 ;
      }
       .msg_Two_left_left{
         width: 60%;
         height: 100%;
         margin:40px auto 0;
      }
     
     /* 右边 */
     .msg_Two_right{
         width: 39%;
        overflow-x: hidden;
        overflow-y: scroll;
        /* background: #f00; */
        text-align: left;
        float: left;
     }
     .radio{
        margin: 20px 0 20px 0;
     }
     .msg_Two_right_OneA{
         width: 100%;
        height: 300px;
        padding: 10px 0 0 10px;
        overflow-x: hidden;
        overflow-y: scroll;
        border-radius: 10px;
        background: rgb(245, 245, 243);
     }
      .msg_Two_right::-webkit-scrollbar {
        display: none;
    }
</style>